<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="./login.css">
</head>

<body>
    <div class="page">
        <div class="panel">
            <div class="panel_visible">
                <!--注册表单-->
                <div class="panel_content">
                    <h1 class="panel_tetle">Sing Up</h1>
                    <form action="" class="form">
                        <label for="username" class="form_label">Username</label>
                        <input type="text" id="username" class="form_input">
                        <label for="password" class="form_label">Password</label>
                        <input type="password" id="password" class="form_input">
                        <label for="truename" class="form_label">True Name</label>
                        <input type="text" id="truename" class="form_input">
                        <button class="form_btn" type="button" value="Submit ">Submit</button>
                        <button class="form_toggle js-formToggle" type="button"> Or,sing in</button>
                    </form>
                </div>
                <!--登录表单-->
                <div class="panel_content panel_content-overlay js-panel_content">
                    <h1 class="panel_tetle">Sing In</h1>
                    <form action="" class="form">
                        <label for="usernameIn" class="form_label">Username</label>
                        <input type="text" id="usernameIn" class="form_input">
                        <label for="passwordIn" class="form_label">Password</label>
                        <input type="password" id="passwordIn" class="form_input">
                        <button class="form_btn" type="button" value="Submit ">Sign In</button>
                        <br>
                        <button class="form_toggle js-formToggle" type="button"> Or,Sing Up</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="panel_back js_imageAnimate">
            <img src="./login.jpg" class="panel_img">
        </div>
    </div>

    <script>
        var toggleBtn = document.querySelectorAll('.js-formToggle')
        for(var i = 0;i< toggleBtn.length;i++){
            toggleBtn[i].addEventListener('click',toggleForm)
        }
        var firstClick = true;
        function toggleForm(){
            if(!firstClick){
                document.querySelector('.js-imageAnimate').classList.toggle("animate");
                document.querySelector('.js-imageAnimate').classList.toggle("animateOut");
                document.querySelector('.js-panel_content').classList.toggle("animate");
                document.querySelector('.js-panel_content').classList.toggle("animateOut");

            }else{
                firstClick = false;
                document.querySelector('.js-imageAnimate').classList.add('animate');
                document.querySelector('.js-panel_content').classList.add('animate');

            }
        }

    </script>
</body>

</html>